import React, { useState, useEffect, useRef } from 'react';
import { StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, Modal, Dimensions } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import { useFocusEffect } from '@react-navigation/native';
import { useAuth, baseURL } from '../../context/AuthProvider';
import { AntDesign } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from '../../api/axios';
const screenW = Dimensions.get('window').width;


const add = (m) => { return m < 10 ? + m : m }
//将时间戳转为普通格式
const fortime = (shijianchuo) => {
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s);
}
// 生长日志图片
const Cropimgs = ({ navigation, route }) => {
    const [isVisible, setIsVisible] = useState(false)
    const [visible, setVisible] = useState(false)
    const crop = route.params.item
    var imgs = []
    const [aimgs, setImgs] = useState([])
    useEffect(() => {
        console.log(crop);
        console.log(crop.imgs);
        for (let i = 0; i < crop.imgs.length; i++) {
            imgs.push({ url: baseURL + crop.imgs[i].url })
        }
        console.log(imgs);
        setImgs(imgs)
    }, [])
    const delRecord = () => {
        axios.post('/recordlist/delrecord', { recordid: crop.recordid }).then(res => {
            console.log(res);
            if (res.code == 200) {
                navigation.navigate('MyCrops')
            }
        })
    }
    const footerButtons = [
        { text: 'Cancel', onPress: () => console.log('cancel') },
        { text: 'Ok', onPress: () => console.log('ok') },
    ]
    return (
        <View style={{ width: '100%', height: '100%' }}>
            <Modal
                animationType="slide"
                transparent={true}
                visible={visible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                    setVisible(!visible);
                }}
                footer={footerButtons}
            >
                <ImageBackground style={{ width: '100%', height: '100%', backgroundColor: '#00000099', justifyContent: 'center' }}>
                    <View style={styles.modalView}>
                        <Text style={{ margin: 10 }}>是否确认删除？</Text>
                        <View style={{ flexDirection: 'row', width: '40%', alignItems: 'center', justifyContent: 'space-between' }}>
                            <Button title='取消' style={{ marginRight: 20 }} onPress={() => setVisible(false)}></Button>
                            <Button title='确认' style={{ margin: 15 }} onPress={delRecord}></Button>
                        </View>
                    </View>
                </ImageBackground>
            </Modal>
            <View style={{ width: '100%', height: '6%', backgroundColor: 'rgba(203,242,203,0.45)', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: '1%' }}>
                <Text style={{ width: '90%', fontSize: 16, color: 'grey' }}>{fortime(crop.recorddate)}</Text>
                <AntDesign name="delete" size={24} color="#8DD962" onPress={() => { setVisible(true) }} />
            </View>
            {/* <Button title="启动预览图片" onPress={() => setIsVisible(true)}></Button> */}

            <View style={{ width: '100%', alignItems: 'center', backgroundColor: '#fff', height: '90%' }}>
                <Text style={{ width: '89%', marginTop: '4.5%', marginBottom: '2%', fontSize: 15 }}>{crop.recordtext}</Text>
                <View style={{ width: '93%', flexDirection: 'row', flexWrap: 'wrap' }}>
                    {
                        crop.imgs.length != 0 ?
                            crop.imgs.map(item => {
                                return <TouchableOpacity style={{ margin: 6 }} onPress={() => setIsVisible(true)}>
                                    <Image source={{ uri: baseURL + item.url }} style={{ width: 120, height: 120 }} key={item.recordimgid} />
                                </TouchableOpacity>
                            })
                            :
                            <></>
                    }
                </View>
            </View>
            <Modal visible={isVisible} transparent={true} onPointerCancel={() => setIsVisible(!isVisible)}>
                <ImageViewer enableSwipeDown menuContext={{ saveToLocal: '保存到本地', cancel: '取消' }} onSave={() => alert("点击了保存图片")} onSwipeDown={() => setIsVisible(false)} imageUrls={aimgs} />
            </Modal>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    fonts: {
        marginBottom: 8,
    },
    user: {
        flexDirection: 'row',
        marginBottom: 6,
    },
    image: {
        width: 30,
        height: 30,
        marginRight: 10,
    },
    name: {
        fontSize: 16,
        marginTop: 5,
    },
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
    },
    modalView: {
        margin: 50,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        justifyContent: 'center'
        // opacity: 1
    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center"
    }
});
export default Cropimgs;